
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支撑react操作DOM-->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<div id="demo"></div>

	<script type="text/babel">/* 此处必须写成babel */
		// 创建  类式组件 (必须继承React中的类)
		class Weather extends React.Component{
			// constructor(props){
			// 	super(props)
			// 	this.state = {ishot:true,wind:"小风"}
			// 	this.change_one = this.change.bind(this)
			// }
			// 简写把构造器去掉 状态数据拿到外部
			state = {ishot:true,wind:"小风"}
			render(){
				console.log("reder中的this",this);
				const{ishot,wind} = this.state
				return <h2 onClick = {this.change}>测试 天气 类式组件{ishot ? '热':'凉'},风向：{wind}</h2>
			}
			// 使用箭头函数（没有this）有this就直接指向外部 赋值类型方法
			change = () =>{
				//注意react中的state不能直接更改要用setState（{ishot:!ishot}） 
				const ishot = this.state.ishot
				this.setState({ishot:!ishot})
			}
		}
		ReactDOM.render(<Weather/> , document.getElementById("test"))

		
	</script>
	</body>
	<style>
		.title{
			background-color: aqua;
		}
	</style>

	</html>
